<!DOCTYPE HTML>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content" style="width: 100%; height: 100%;">
        <div id="map" style="width: 100%; height: 100%;"></div>
    </div>
    <div th:include="include::footer"></div>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
    <!--<script src="../../../static/js/plugins/echarts/echarts.min.js" th:src="@{/js/plugins/echarts/echarts.min.js}"></script>-->
    <!--<script src="../../../static/js/plugins/echarts/china.js" th:src="@{/js/plugins/echarts/china.js}"></script>-->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=XXXXX"></script>
    <script type="text/javascript">
		var prefix = ctx + "gxgw_modules/machine";
        var userData = {};
        var getUserData = new Promise( function (resolve, reject) {
            var geolocation = new BMap.Geolocation();
            // 创建地理编码实例
            var myGeo = new BMap.Geocoder();
            geolocation.getCurrentPosition(function(r){
                if(this.getStatus() == BMAP_STATUS_SUCCESS){
                    var pt = r.point;
                    userData.value = [parseFloat(pt.lng.toFixed(2)),parseFloat(pt.lat.toFixed(2))];
                    userData.name = r.address.province + r.address.city;
                    console.log(userData);
                    resolve();
                }
            });
        });

		var getData = function (data) {
		    var res = {0: [], 1: []};
		    data.forEach(function (item) {
		        res[item.macState].push({name: item.macAddress, value: [item.macLong, item.macLat]});
            })
		    return res;
        };

        $.post(prefix+"/listMap", function(data){
            var resultData = getData(data);
            resultData.user = [userData];
            console.log(resultData);

            var myChart = echarts.init(document.getElementById('map'));
            var option = {
                backgroundColor:"#1e345d",
                color:['#fc3737','#00ff00'],/*地图上面的两大项颜色*/
                tooltip: {
                    trigger: 'item',
                    formatter: function (data) {
                        if(data.seriesType === "scatter"){
                            return data.seriesName +
                                "<br/>设备地址：" + data.name +
                                "<br/>经纬度：" + data.value.toString();
                        }
                    }
                },
                roam: true,
                legend: {
                    orient: 'horizontal',
                    left: '50',
                    top:'10',
                    data: ['正常使用', '关机'],
                    textStyle:{
                        color:'#ffffff'
                    },
                    icon:'circle',
                },
                geo: {
                    map: 'china',
                    zoom:1.2,
                    layoutCenter : ['50%','50%'],
                    layoutSize : "100%",
                    label: {
                        normal: {
                            show: true,/*是否城市名字*/
                            textStyle:{
                                color:'#000'
                            }
                        },
                        emphasis: {
                            show: false
                        }
                    },
                },
                series: [
                    {
                        name: '正常使用',
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        itemStyle: {
                            normal: {
                                shadowBlur: 20,
                                shadowColor: '#FFF68F'
                            }
                        },
                        data: resultData['1'],
                        symbolSize: 6,
                        label: {
                            normal: {
                                formatter: '{b}',
                                position: 'right',
                                show: false
                            },
                            emphasis: {
                                show: false
                            }
                        }
                    },
                    {
                        name: '关机',
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        data: resultData['0'],
                        symbolSize: 6,
                        label: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: false
                            }
                        }
                    },
                    {
                        name: '当前位置',
                        type: 'scatter',
                        coordinateSystem: 'geo',
//                        data: [{name: "广东省汕头市", value: [116.73, 23.38]}],
                        data: resultData.user,
                        symbol: 'pin', //气泡
                        symbolSize: 26,
                        label: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: false
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#f93427', //标志颜色
                            }
                        }
                    },
                ]
            };
            myChart.setOption(option);
            getUserData.then(function () {
                myChart.setOption(option, true);
            })

        })



	</script>
</body>
</html>
